<template>
  <div>
    <button @click="saveImage">保存</button>
    //前端页面设置一个画布，并隐藏起来
    <canvas canvas-id="myCanvas" :style="'width:'+windowWidth+'px;height:'+windowHeight+'px;position:absolute;op:-9999px;left:-9999px;'"/>
  </div>
</template>

<script>
export default {
  name: "jietu",
  data(){
    return{
      windowWidth: 320,
      windowHeight: 500
    }
  },
  methods:{
    //分享按钮的兼容方法
    shareWeiXin(scene){
      //#ifdef MP
      // console.log("小程序端")
      this.saveImage()
      //#endif

      //#ifdef APP-PLUS
      let _this = this
      let sc = scene
      _this.capture(sc)
      //#endif
    },
//小程序端保存图片
    saveImage(){
      // console.log("ok")
      var url = './share.jpg'

      //开始绘制图片，这边主要就是canvas写法了，uniapp官方：https://uniapp.dcloud.io/api/ui/canvas?id=%E5%9C%A8canvas%E4%B8%8A%E7%94%BB%E5%9B%BE
      const context = uni.createCanvasContext('myCanvas')
      context.drawImage(url,0, 0, this.windowWidth, this.windowHeight)
      context.drawImage("./h3c1.jpg",this.windowWidth/2-95/2, this.windowHeight/2,95,95)
      context.drawImage("./h3c.jpg",(this.windowWidth-251)/2,7*(this.windowHeight/8),78,24)
      context.drawImage( './share.jpg',(this.windowWidth-251)/2+88,7*(this.windowHeight/8),78,24)
      context.setFontSize(14)
      context.setFillStyle("#FEEDBB")
      context.fillText('邀请码：'+this.invitation,(this.windowWidth-251)/2+88+88,7*(this.windowHeight/8)+16)

      //重点：这边本来保存图片是写在draw之后，但第一次保存时空白，第二次才生效，写在draw回调里面就OK了。
      context.draw(false,(()=>{
        uni.canvasToTempFilePath({
          canvasId:'myCanvas',
          success: function(res){
            uni.hideLoading()
            // console.log(res.tempFilePath)
            uni.saveImageToPhotosAlbum({
              filePath:res.tempFilePath,
              success : function(res){
                uni.showToast({title : '图片已保存'})
              }
            })
          }
        })

      })())

      // context.draw()
      // uni.canvasToTempFilePath({
      //   canvasId:'myCanvas',
      //   success: function(res){
      //     uni.hideLoading()
      //     // console.log(res.tempFilePath)
      //     uni.saveImageToPhotosAlbum({
      //       filePath:res.tempFilePath,
      //       success : function(res){
      //         uni.showToast({title : '图片已保存'})
      //       }
      //     })
      //   }
      // })

    },

  }
}
</script>

<style scoped>

</style>